<form action="{{baseRestPath + 'journaal/upload'}}" method="post" enctype="multipart/form-data">
  <label class="filefield">Selecteer een bestand: </label> <input type="file" name="journaalbestand" size="200" class="filefield"/>
  <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-upload"></span></button>
</form>

<div>
	<hr>
	<label>Jaar: </label> <input type="number" ng-model="jaar"/>
	<hr>
</div>

<table class="table table-striped table-condensed" fixed-header table-height="700px">
	<thead>
		<tr>
			<th>...</th>
			<th>B</th>
			<th>Datum</th>
			<th>Afschriftnummer</th>
			<th>Transactienummer</th>
			<th>Transactie</th>
			<th>Bedrag</th>
		</tr>
	</thead>
	<tbody>
		<tr ng-repeat="journaalitem in journaal">
			<td><button ng-click="bewerken($index)"><span class="glyphicon glyphicon-pencil"></span></button></td>
			<td>{{isGeboekt($index)}}</td>
			<td>{{journaalitem.datum}}</td>
			<td>{{journaalitem.afschriftnummer}}</td>
			<td>{{journaalitem.transactienummer}}</td>
			<td>{{journaalitem.transactie}}</td>
			<td>{{journaalitem.bedrag}}</td>
		</tr>
	</tbody>
</table>

<script type="text/ng-template" id="journaalModal.html">
	<div class="modal-header">
		<h3 class="modal-title">Boeken van een journaal-item</h3>
	</div>
	<div class="modal-body">
		<div><b>Datum:</b> {{journaalitem.datum}}</div>
		<div><b>Transactie:</b> {{journaalitem.transactie}}</div>
		<div><b>Bedrag:</b> {{journaalitem.bedrag}}</div>
		<div><b>Bankrekening:</b> {{journaalitem.bankrekening.rekeningnr}} - {{journaalitem.bankrekening.omschrijving}}</div>
		<div><b>Rekening tegenpartij:</b> {{journaalitem.tegenpartijRekening}}</div>
		<div><b>Naam tegenpartij:</b> {{journaalitem.tegenpartijNaam}}</div>
		<div><b>Adres tegenpartij:</b> {{journaalitem.tegenpartijAdres}} - {{journaalitem.tegenpartijPlaats}}</div>
		<div><b>Devies:</b> {{journaalitem.devies}}</div>
		
		<tabset>
		<tab heading="Normale boeking" select="changeTab(0)" active="isNormaal">

		<form ng-submit="saveNormaal()" class="form-inline" role="form" id="formNormaal">
			<div ng-repeat="boeking in journaalitem.boekingen track by $index">
				<div class="form-group">
					<label>Boekrekening:</label> 
					<select class="form-control" ng-model="boeking.boekrekening" ng-options="boekrekening.rekeningnr  + ' - ' + boekrekening.omschrijving for boekrekening in boekrekeningen | filter:{boekbaar:'true'} track by boekrekening.id">
					</select>
				</div>
				<div class="form-group">
					<label>Omschrijving:</label>
					<input class="form-control" type="text" ng-model="boeking.omschrijving" placeholder="Geef omschrijving"/>
				</div>
				<div class="form-group">
					<label>Bedrag:</label>
					<input class="form-control" type="text" ng-model="boeking.bedrag" placeholder="Bedrag in EUR"/>
				</div>
				<button type="button" ng-click="verwijderen($index)"><span class="glyphicon glyphicon-minus"></span></button>
			</div>
			<div>
				<div class="form-group">
					<label>Boekrekening:</label> 
					<select class="form-control" ng-model="newboeking.boekrekening" ng-options="boekrekening.rekeningnr  + ' - ' + boekrekening.omschrijving for boekrekening in boekrekeningen | filter:{boekbaar:'true'} track by boekrekening.id">
					</select>
				</div>
				<div class="form-group">
					<label>Omschrijving:</label>
					<input class="form-control" type="text" ng-model="newboeking.omschrijving" placeholder="Geef omschrijving"/>
				</div>
				<div class="form-group"> 
					<label>Bedrag:</label>
					<input class="form-control" type="text" ng-model="newboeking.bedrag" placeholder="Bedrag in EUR"/>
				</div>
				<button type="button" ng-click="toevoegen()"><span class="glyphicon glyphicon-plus"></span></button>
			</div>
		</form>

		</tab>
		<tab heading="Transfer" select="changeTab(1)" active="isTransfer">
			<form role="form" ng-submit="saveTransfer()" id="formTransfer">
				<div class="form-group">
					<label>Boekrekening:</label> 
					<select class="form-control" ng-model="transferboeking.boekrekening" ng-options="boekrekening.rekeningnr  + ' - ' + boekrekening.omschrijving for boekrekening in boekrekeningen | filter:{boekbaar:'true'} track by boekrekening.id">
					</select>
				</div>
				<div class="form-group">
					<label>Bankrekening:</label> 
					<select class="form-control" ng-model="transferboeking.bankrekening" ng-options="bankrekening.rekeningnr  + ' - ' + bankrekening.omschrijving for bankrekening in bankrekeningen track by bankrekening.id">
					</select>
				</div>
				<div class="form-group">
					<label>Omschrijving:</label>
					<input class="form-control" type="text" ng-model="transferboeking.omschrijving" placeholder="Geef omschrijving"/>
				</div>
			</form>
		</tab>
		</tabset>
	</div>
	<div class="modal-footer">
		<button type="submit" class="btn btn-success btn-sm" form="formNormaal" ng-hide="!isNormaal"><span class="glyphicon glyphicon-save"></span></button>
		<button type="submit" class="btn btn-success btn-sm" form="formTransfer" ng-hide="isNormaal"><span class="glyphicon glyphicon-save"></span></button>
		<button type="reset" ng-click="reset()" class="btn btn-default btn-sm"><span class="glyphicon glyphicon-remove"></span></button>
	</div>
</script>